<template>
	<div class="list">
		<div class="listItem" v-for="(value,index) in listData" :key="index" v-if="activeIndex == 'HomeView'"
			@click="getContent(value.id)">
			<h3>{{value.name}}</h3>
			<div>
				<p>描述:{{value.description}}</p>
				<span class="left">分类:{{value.category}}</span>
				<span class="right">时间:{{parseTimeNew(value.create_time)}}</span>
			</div>
			<el-divider v-if="listData.length - 1 != index"></el-divider>
		</div>
		<div class="listItem" v-for="(value,index) in listData" :key="index" v-if="activeIndex == 'cateView'" @click="getContent(value.id)">
			<h3>{{value.name}}</h3>
			<div>
				<span class="left">描述：{{value.description}}</span>
				<span class="right">时间:{{parseTimeNew(value.create_time)}}</span>
			</div>
			<el-divider v-if="listData.length - 1 != index"></el-divider>
		</div>
		<div class="listItem" v-for="(value,index) in listData" :key="index" v-if="activeIndex == 'articleView'" @click="getContent(value.id)">
			<h3>{{value.name}}</h3>
			<div>
				<p>描述:{{value.description}}</p>
				<span class="left">分类:{{value.category}}</span>
				<span class="right">时间:{{parseTimeNew(value.create_time)}}</span>
			</div>
			<el-divider v-if="listData.length - 1 != index"></el-divider>
		</div>
		<div class="listItem" v-for="(value,index) in listData" :key="index" v-if="activeIndex == 'blogarticleView'" @click="getContent(value.id)">
			<h3>{{value.name}}</h3>
			<div>
				<p>描述:{{value.description}}</p>
				<p>作者:{{value.username}}</p>
				<span class="left">分类:{{value.category}}</span>
				<span class="right">时间:{{parseTimeNew(value.create_time)}}</span>
			</div>
			<el-divider v-if="listData.length - 1 != index"></el-divider>
		</div>
		<el-pagination background layout="prev, pager, next" :page-size="listpage.pagesize" :total="listpage.listcount"
			:hide-on-single-page="true" :current-page="listpage.currentpage" @current-change="currentchange">
		</el-pagination>
	</div>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		name: "List",
		props: {
			activeIndex: String,
			cateid:"",
		},
		computed: {
			...mapState(['userinfo'])
		},
		watch:{
			cateid(){
				this.getlistData();
			}
		},
		data() {
			return {
				listData: [],
				listpage: {
					currentpage: 1,
					listcount: 10,
					pagesize: 10
				}
			}
		},
		methods: {
			parseTimeNew(date) {
				var ndate = new Date(date)
				let type = 'yyyy-MM-dd hh:mm:ss'
				const o = {
					'M+': ndate.getMonth() + 1, // 月份
					'd+': ndate.getDate(), // 日
					'h+': ndate.getHours(), // 小时
					'm+': ndate.getMinutes(), // 分
					's+': ndate.getSeconds(), // 秒
					'q+': Math.floor((ndate.getMonth() + 3) / 3), // 季度
					'S': ndate.getMilliseconds() // 毫秒
				}
				if (/(y+)/.test(type)) type = type.replace(RegExp.$1, (ndate.getFullYear() + '').substr(4 - RegExp.$1
					.length))
				for (const k in o) {
					if (new RegExp('(' + k + ')').test(type)) type = type.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[
						k]) : (('00' + o[k]).substr(('' + o[k]).length)))
				}
				return type
			},
			async getlistData() {
				if (this.activeIndex == 'HomeView') {
					let {
						data
					} = await this.$axios.get(
						'/blog/users/userarticlelist?pagesize=10&currentpage=1&sort=desc&userid=' +
						this
						.userinfo
						.id);
					this.listData = data.data.List;
				} else if (this.activeIndex == 'cateView') {
					let {
						data
					} = await this.$axios.get(
						'/blog/users/catearticle?pagesize=10&currentpage=1&userid=' +
						this
						.userinfo
						.id + "&cateid=" + this.cateid);
					this.listData = data.data.List;
					this.listpage.currentpage = data.data.listpage.currentpage;
					this.listpage.listcount = data.data.listpage.listcount;
					this.listpage.pagesize = data.data.listpage.pagesize;
				} else if (this.activeIndex == 'articleView') {
					let {
						data
					} = await this.$axios.get(
						'/blog/users/userarticlelist?pagesize=10&currentpage=1&userid=' +
						this
						.userinfo
						.id);
					this.listData = data.data.List;
					this.listpage.currentpage = data.data.listpage.currentpage;
					this.listpage.listcount = data.data.listpage.listcount;
					this.listpage.pagesize = data.data.listpage.pagesize;
				} else if (this.activeIndex == 'blogarticleView') {
					let {
						data
					} = await this.$axios.get(
						'/blog/users/userarticlelist?pagesize=10&currentpage=1');
					this.listData = data.data.List;
					this.listpage.currentpage = data.data.listpage.currentpage;
					this.listpage.listcount = data.data.listpage.listcount;
					this.listpage.pagesize = data.data.listpage.pagesize;
				}
			},
			async currentchange(val) {
				if (this.activeIndex == 'cateView') {
					let {
						data
					} = await this.$axios.get(
						'/blog/users/usercatelist?pagesize=5&currentpage=' + val + '&userid=' +
						this
						.userinfo
						.id);
					this.listData = data.data.List;
					this.listpage.currentpage = data.data.listpage.currentpage;
					this.listpage.listcount = data.data.listpage.listcount;
					this.listpage.pagesize = data.data.listpage.pagesize;
				} else if (this.activeIndex == 'articleView') {
					let {
						data
					} = await this.$axios.get(
						'/blog/users/userarticlelist?pagesize=10&currentpage=' + val + '&userid=' +
						this
						.userinfo
						.id);
					this.listData = data.data.List;
					this.listpage.currentpage = data.data.listpage.currentpage;
					this.listpage.listcount = data.data.listpage.listcount;
					this.listpage.pagesize = data.data.listpage.pagesize;
				} else if (this.activeIndex == 'blogarticleView') {
					let {
						data
					} = await this.$axios.get(
						'/blog/users/userarticlelist?pagesize=10&currentpage=' + val);
					this.listData = data.data.List;
					this.listpage.currentpage = data.data.listpage.currentpage;
					this.listpage.listcount = data.data.listpage.listcount;
					this.listpage.pagesize = data.data.listpage.pagesize;
				}
			},
			getContent(id) {
				// console.log(id);
				this.$router.push({
					path:"/content",
					query: {
						articleid: id
					}
				})
			}
		},
		created() {
			this.getlistData()
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.list {
		margin: 0 20px;

		.listItem {
			margin: 20px 0;

			h3 {
				margin-bottom: 10px;
			}

			div {
				overflow: hidden;

				p {
					margin-bottom: 10px;
				}

				span.left {
					float: left;
				}

				span.right {
					float: right;
				}
			}
		}

		.el-pagination {
			margin: 30px 0px 80px;
			float: right;
		}
	}
</style>
